html {
    height: 100%;
    body {
        height: 100%;
        .pay_page {
            min-height: 100%;
        }
    }
}
.pay_page {
    background-image: url("../img/bj.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    min-width: 1200px;
}
.head {
    height: 60px;
    //line-height: 60px;
    margin-bottom: 16px;
    .logo {
        margin-top: 18px;
        position: relative;
        a {
            display: inline-block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
    }
    .nav {
        margin-top: 29px;
        &>div {
            display: inline-block;
            margin-left: 30px;
        }
        .upload-h {
            color: #333333;
            font-size: 14px;
            &:hover {
                color: #705bfd;
            }
            a {
                color: inherit;
                &:hover {
                    text-decoration: none;
                }
            }
        }
        .report-h {
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            border-radius: 4px;
            &:hover {
                color: #705bfd;
            }
            a {
                color: inherit;
                &:hover {
                    text-decoration: none;
                }
            }
        }
    }
}

.content-block {
    padding: 0 15px;
}
.block-left {
    width: 300px;
    .operation-process {
        background: linear-gradient(180deg, #fcfcff, #f2f3ff);
        border: 1px solid #e4e9fb;
        border-radius: 10px;
        padding: 20px 24px 30px;
        .name {
            color: #231815;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .operation {
            position: relative;
            padding-left: 44px;
            margin-bottom: 36px;
            .sequence {
                position: absolute;
                left: 0;
                top: 0;
                font-size: 14px;
                color: #7d55fc;
                font-weight: bold;
                height: 24px;
                width: 24px;
                text-align: center;
                line-height: 24px;
                background: linear-gradient(180deg, #e4dcff, #f0edff);
                border-radius: 50%;
                &.sequence-line {
                    &:after {
                        content: '';
                        position: absolute;
                        left: 50%;
                        bottom: -47px;
                        height: 47px;
                        border: 1px dashed #dfdfdf;
                    }
                }
            }
            .p1 {
                font-size: 14px;
                font-weight: bold;
                color: #333333;
                margin-bottom: 2px;
            }
            .p2 {
                color: #666666;
                font-size: 12px;
            }
        }
    }
    .common-problem {
        background: linear-gradient(0deg, #fcfcff, #f2f3ff);
        border: 1px solid #e4e9fb;
        border-radius: 10px;
        padding: 20px 24px 30px;
        margin-top: 16px;
        .name {
            color: #231815;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .p-cont {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            .problem-item {
                margin-top: 14px;
                .problem-text {
                    color: #222222;
                    font-size: 14px;
                    font-weight: bold;
                    margin-bottom: 12px;
                    img {
                        margin-top: -2px;
                    }
                    span {
                        display: inline-block;
                        width: 17px;
                        height: 17px;
                        background: #7d55fc;
                        color: #fff;
                        font-weight: normal;
                        text-align: center;
                        line-height: 17px;
                        border-radius: 50%;
                        border-bottom-left-radius: 0;
                    }
                }
                .answer {
                    font-size: 12px;
                    color: #999999;
                    line-height: 1.8;
                    text-align: justify;
                    span {
                        color: #7d55fc;
                    }
                }
            }
        }
    }
}
.block-right {
    margin-left: 18px;
    width: calc(100% - 300px - 18px);
    .r-content {
        background: #ffffff;
        padding: 22px 30px 20px 30px;
        border-radius: 10px;
        .back {
            color: #222222;
            a {
                color: inherit;
                &:hover {
                    text-decoration: none;
                    color: #7d55fc;
                }
            }
        }
        .r-title {
            color: #222222;
            font-size: 24px;
            font-weight: bold;
            text-align: center;
            margin-top: 20px;
            margin-bottom: 50px;
            position: relative;
            z-index: 4;
            &:after {
                content: '';
                position: absolute;
                width: 96px;
                height: 4px;
                background: #ece6ff;
                bottom: 2px;
                left: 50%;
                transform: translateX(-50%);
                z-index: -1;
            }
        }
        .block-information {
            max-width: 810px;
            margin: 0 auto;
            .name {
                color: #222222;
                font-size: 16px;
                position: relative;
                padding-left: 18px;
                line-height: 1;
                &:after {
                    content: '';
                    position: absolute;
                    width: 2px;
                    height: 100%;
                    background: #7d56fc;
                    left: 0;
                    top: 0;
                }
            }
            .information-box {
                width: 810px;
                background: #f9f7ff;
                padding: 24px 20px;
                border-radius: 10px;
                margin-top: 20px;
                .info {
                    font-size: 0;
                    p {
                        color: #999999;
                        font-size: 14px;
                        display: inline-block;
                        width: 50%;
                        margin-bottom: 30px;
                        &>span {
                            color: #222222;
                            margin-left: 10px;
                        }
                        &.orderId {
                            //text-align: right;
                        }
                        .title-t {
                            max-width: 250px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }
                        .wordNum-t {
                            margin-top: 2px;
                        }
                        .time {
                            margin-bottom: 50px;
                        }
                        &.title, &.system, &.wordNum {
                            padding-right: 26px
                        }
                        &.billing, &.price, &.orderId {
                            padding-left: 26px
                        }
                        .price-t.f-r {
                            color: #ff1b1b;
                            font-weight: bold;
                            font-size: 18px;
                            margin-top: -2px;
                        }
                        .copyID {
                            color: #7d55fc;
                            text-decoration: underline;
                            cursor: pointer;
                        }
                        #copyIDInput {
                            position: absolute;
                            opacity: 0;
                            z-index: -1;
                        }
                    }
                    &:first-child {
                        position: relative;
                        &:after {
                            content: '';
                            position: absolute;
                            width: calc(100% + 40px);
                            height: 1px;
                            background: #fff;
                            left: -20px;
                            bottom: 14px;
                        }
                    }
                }
            }
        }
        .block-coupon {
            max-width: 810px;
            margin: 22px auto 0;
            .name {
                color: #222222;
                font-size: 16px;
                position: relative;
                padding-left: 18px;
                line-height: 1;
                &:after {
                    content: '';
                    position: absolute;
                    width: 2px;
                    height: 100%;
                    background: #7d56fc;
                    left: 0;
                    top: 0;
                }
            }
            &>div {
                margin-top: 14px;
                .form-control {
                    display: inline-block;
                    width: 30%;
                    box-shadow: none;
                    border-color: #e9e7e7;
                    border-radius: 6px;
                    padding-right: 30px;
                    &:focus {
                        box-shadow: 0 0 6px 0 #e3daff;
                    }
                }
                .eliminateCoupon {
                    width: 16px;
                    height: 16px;
                    background-image: url("../img/delete2.png");
                    background-repeat: no-repeat;
                    margin-left: -28px;
                    margin-right: 8px;
                    vertical-align: middle;
                    margin-top: -2px;
                    cursor: pointer;
                    display: none;
                    &:hover {
                        background-image: url("../img/delete3.png");
                        background-repeat: no-repeat;
                    }
                }
                .use_now {
                    display: inline-block;
                    height: 34px;
                    width: 76px;
                    color: #fff;
                    background: #7d55fc82;
                    text-align: center;
                    line-height: 34px;
                    border-radius: 6px;
                    margin-left: 12px;
                    cursor: not-allowed;
                    pointer-events: none;
                    font-size: 14px;
                    &.can {
                        background: #7d55fc;
                        cursor: pointer;
                        pointer-events: auto;
                    }
                }
                .claim-coupons {
                    display: none;
                }
                .errorTip {
                    display: none;
                    margin-left: 10px;
                    color: #d81e06;
                    font-size: 12px;
                    img {
                        vertical-align: sub;
                        margin-right: 6px;
                    }
                }
            }
        }
        .block-pay {
            max-width: 810px;
            min-height: 334px;
            margin: 30px auto 0;
            .name {
                color: #222222;
                font-size: 16px;
                position: relative;
                padding-left: 18px;
                line-height: 1;
                &:after {
                    content: '';
                    position: absolute;
                    width: 2px;
                    height: 100%;
                    background: #7d56fc;
                    left: 0;
                    top: 0;
                }
            }
            .pay-box {
                .payType {
                    color: #545454;
                    font-size: 14px;
                    margin-right: 14px;
                    user-select:none;
                    margin-top: 30px;
                    &>div {
                        background-color: #f5f5f5;
                        border-radius: 4px;
                        cursor: pointer;
                        width: 170px;
                        height: 50px;
                        text-align: center;
                        line-height: 50px;
                        margin-bottom: 30px;
                        margin-right: 20px;
                    }
                    img {
                        vertical-align: middle;
                        position: relative;
                        top: -1px;
                    }
                    span {
                        width: 80px;
                        display: inline-block;
                        text-align: left;
                        margin-left: 10px;
                    }
                    .select {
                        line-height: 48px;
                        background: url(../img/select.png) no-repeat;
                        background-size: 100% 100%;
                        border-image-slice: 1;
                        background-color: #fff;
                    }
                }
                .tbPay {
                    display: none;
                    padding-left: 20px;
                    padding-bottom: 24px;
                    .Options {
                        margin-bottom: 16px;
                        border-bottom: 2px solid #f7f7f7;
                        height: 36px;
                        width: 412px;
                        &>div {
                            float: left;
                            width: 100px;
                            color: #545454;
                            font-size: 14px;
                            height: 36px;
                            border-bottom: 2px solid #f7f7f7;
                            position: relative;
                            bottom: -1px;
                            z-index: 10;
                            cursor: pointer;
                        }
                        #XHS {
                            margin-right: 20px;
                            display: none;
                        }
                        #TB {
                            padding-left: 6px;
                            display: none;
                        }
                        #XHS.Select {
                            border-bottom-color: #fd2442;
                        }
                        #TB.Select {
                            border-bottom-color: #fc8848;
                        }
                    }
                    .main {
                        width: 480px;
                    }
                    &.errInput {
                        border-color: #ff2525;
                    }
                    .tb-head {
                        height: 46px;
                        line-height: 46px;
                        padding: 0 25px;
                        font-size: 16px;
                        border-bottom: 1px solid #cfcececc;
                        .tb-tips {
                            color: #979797;
                            font-size: 12px;
                            font-weight: normal;
                            margin-left: 10px;
                        }
                        .tb-buy {
                            width: 120px;
                            height: 30px;
                            background: #ff8400;
                            line-height: 30px;
                            color: #fff;
                            border-radius: 50px;
                            text-align: center;
                            margin-top: 8px;
                            font-size: 12px;
                            vertical-align: text-bottom;
                            position: relative;
                            a {
                                display: inline-block;
                                width: 100%;
                                position: absolute;
                                height: 100%;
                                top: 0;
                                left: 0;
                            }
                            img {
                                vertical-align: text-bottom;
                            }
                        }
                    }
                    .tb-content {
                        .tb-idBox {
                            position: relative;
                            label {
                                color: #979797;
                                font-size: 12px;
                                font-weight: normal;
                                margin-right: 14px;
                            }
                            .tb-oid {
                                width: 70%;
                                display: inline-block;
                                margin-right: 10px;
                                margin-top: 10px;
                                &.noMarginTop {
                                    margin-top: 0;
                                }
                                &.errInput {
                                    border-color: red;
                                }
                            }
                            .tb-tips {
                                color: #979797;
                                font-size: 12px;
                                font-weight: normal;
                            }
                        }
                        .errTip {
                            color: #e91616;
                            font-size: 12px;
                            margin-top: 14px;
                            display: none;
                        }
                        .tb-payOrder {
                            background: linear-gradient(45deg, #a284ff, #7d55fc);
                            width: 90px;
                            height: 32px;
                            border-radius: 4px;
                            color: #fff;
                            font-size: 14px;
                            line-height: 32px;
                            text-align: center;
                            cursor: pointer;
                            margin-top: 16px;
                        }
                    }
                    .tipsDiv {
                        position: absolute;
                        top: 20px;
                        cursor: pointer;
                        img {
                            width: 14px;
                            height: 14px;
                            margin-top: -6px;
                        }
                        &:hover {
                            div {
                                display: block;
                            }
                        }
                        div {
                            position: absolute;
                            left: 24px;
                            top: -2px;
                            width: 180px;
                            color: rgb(162, 160, 160);
                            display: none;
                            font-size: 12px;
                        }
                    }
                    .tipsDiv2 {
                        position: absolute;
                        top: 10px;
                        img {
                            width: 14px;
                            height: 14px;
                            margin-top: -6px;
                        }
                        div {
                            position: absolute;
                            left: 20px;
                            top: 0px;
                            width: 160px;
                            color: #a2a0a0;
                            font-size: 12px;
                        }
                    }
                }
                .code {
                    display: inline-block;
                    vertical-align: top;
                    padding-bottom: 40px;
                    display: none;
                    .tips {
                        position: absolute;
                        width: 100%;
                        bottom: -30px;
                        left: 4px;
                        color: #333333;
                        font-size: 12px;
                    }
                    .codeER {
                        background: url(../img/codeERbg.png) no-repeat;
                        width: 169px;
                        height: 169px;
                        padding: 18px;
                        position: relative;
                    }
                    .load {
                        position: absolute;
                        left: 18px;
                        top: 18px;
                        img {
                            width: 135px;
                            height: 135px;
                        }
                    }
                    .mask {
                        backdrop-filter: blur(2px);
                        position: absolute;
                        left: 0;
                        top: 0;
                        width: 100%;
                        background-color: rgba(0, 0, 0, 0.5);
                        height: 100%;
                        padding-top: 47px;
                        display: none;
                        text-align: center;
                        cursor: pointer;
                        p {
                            line-height: 30px;
                            font-size: 18px;
                            color: #fff;
                        }
                    }
                    .tipsBox {
                        color: #4c4c4c!important;
                        margin-top: 20px;
                        display: none;
                        img {
                            margin-right: 4px;
                        }
                        span {
                            margin-left: 4px;
                        }
                        .typeTips {
                            font-size: 14px;
                        }
                    }
                }
                .titlesRight {
                    padding-left: 30px;
                    .amount {
                        color: #545454;
                        font-size: 14px;
                        span {
                            font-weight: bold;
                            font-size: 36px;
                            color: #7d55fc;
                        }
                        b {
                            color: #7d55fc;
                            font-size: 18px;
                            margin-left: 16px;
                        }
                    }
                    .payTypes {
                        // padding: 0 6px;
                        height: 30px;
                        // background-color: #f8f8f8;
                        line-height: 30px;
                        color: #333333;
                        font-size: 12px;
                        // text-align: center;
                        img {
                            width: 20px;
                            height: 20px;
                        }
                    }
                    &.payTypeClass {
                        padding-top: 6px;
                        .payTypes {
                            margin-top: 14px;
                        }
                        .auxiliary {
                            margin-top: 18px;
                        }
                    }
                }
                .auxiliary {
                    color: #999999;
                    font-size: 12px;
                    margin-top: 10px;
                    user-select:none;
                    background-color: #f8f8f8;
                    display: inline-block;
                    padding: 8px 10px;
                    .time {
                        color: #ff5400;
                    }
                    .next {
                        color: #7d55fc;
                        cursor: pointer;
                        text-decoration:underline
                    }
                    &>.next:hover {
                        color: #511bfb;
                    }
                }
            }
        }
    }
}

.coupon_pop {
    width: 402px;
    height: 232px;
    background: #fff;
    position: fixed;
    z-index: 1000;
    top: 50%;
    left: 50%;
    margin-top: -101px;
    margin-left: -201px;
    border-radius: 12px;
    display: none;
    #copyInput {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }
    .pop_top {
        height: 46px;
        border-bottom: 1px solid #dddddd;
        padding: 0 22px;
        .pop_title {
            float: left;
            font-size: 18px;
            color: #252525;
            line-height: 46px;
        }
        img {
            width: 14px;
            vertical-align: middle;
            float: right;
            margin-top: 16px;
            cursor: pointer;
        }
    }
    .pop_cont {
        .p1 {
            color: #7d56fc;
            font-size: 16px;
            margin-top: 20px;
            text-align: center;
            margin-bottom: 14px;
        }
        .back_block {
            width: 320px;
            height: 60px;
            background: #f0f6ff;
            margin: 0 auto;
            padding: 12px 0;
            .p2 {
                color: #333333;
                font-size: 12px;
                text-align: center;
                margin-bottom: 4px;
                .orderId_pop {
                    margin-left: 4px;
                }
                span.copy_pop {
                    color: #7d56fc;
                    text-decoration: underline;
                    margin-left: 6px;
                    cursor: pointer;
                }
            }
            .p3 {
                color: #5d5d5d;
                text-align: center;
                font-size: 12px;
            }
        }
    }
    .pop_bottom {
        height: 66px;
        padding: 16px 136px 0;
        .cancel_btn {
            width: 60px;
            height: 34px;
            background: #f2f2f2;
            color: #777777;
            border-radius: 6px;
            font-size: 14px;
            text-align: center;
            line-height: 34px;
            float: left;
            cursor: pointer;
            &:hover {
                background: #e5e5e5
            }
            &:active {
                background: #d3d3d3
            }

        }
        .determine_btn {
            width: 60px;
            height: 34px;
            background: #7d56fc;
            color: #ffffff;
            border-radius: 6px;
            float: left;
            font-size: 14px;
            text-align: center;
            line-height: 34px;
            margin-left: 10px;
            cursor: pointer;
            &:hover {
                background: #6640ee
            }
            &:active {
                background: #5d2ff5
            }
        }
    }
}
.mask_body {
    position: fixed;
    background: #000;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    display: none;
}